<template>
  <div class="layout-container test-sample-data">
    <PageHeader title="试验样本数据管理">
      <template #btns>
        <div class="common-buttons">
          <el-button type="primary" :icon="Plus" @click="onAdd">新增</el-button>
          <el-button type="danger" :icon="Delete" @click="onDelete"
            >删除</el-button
          >
          <el-button type="success" :icon="Download" @click="onExportExcel"
            >导出</el-button
          >
          <!-- <el-button type="warning" :icon="Promotion" @click="onProcess"
          >进入进程</el-button
        > -->
        </div>
      </template>
      <template #search>
        <div class="search common-buttons">
          <el-input
            v-model="keyword"
            style="width: 320px"
            placeholder="请搜索"
            clearable
          ></el-input>
          <el-button
            type="primary"
            :icon="Search"
            @click="onQuery({ pageNo: 1 })"
            >查找</el-button
          >
        </div>
      </template>
    </PageHeader>

    <div class="layout-container-table">
      <CommonTable
        :data="state.tableData"
        v-model:page="page"
        :total="total"
        v-loading="loading"
        @onQuery="onQuery"
        @selection-change="onSelectChange"
      >
        <el-table-column
          prop="sampleName"
          label="试验样本名称"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dytStyle"
          label="导引头体制"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="interType"
          label="干扰类型"
          width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="interScenType"
          label="干扰场景类型"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="foreignElectEquip"
          label="外军电子战装备类型"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="studen"
          label="评估状态"
          width="160"
          show-overflow-tooltip
        >
          <!--   0-原始样本
                  1-完成数据处理
                  2-完成静态相似性评估
                  3-完成动态相似性评估
                  4-完成性能推算
                  5-完成边界推算 -->
          <template #default="scope">
            <div
              class="evaluation-process"
              v-if="scope.row.evaluationStage === '0'"
            >
              <div class="round" style="background: #3868fe"></div>
              <span style="color: #3868fe">原始样本</span>
            </div>
            <div
              class="evaluation-process"
              v-if="scope.row.evaluationStage === '1'"
            >
              <div class="round" style="background: rgba(22, 168, 49, 1)"></div>
              <span style="color: rgba(22, 168, 49, 1)">完成数据处理</span>
            </div>
            <div
              class="evaluation-process"
              v-if="scope.row.evaluationStage === '2'"
            >
              <div class="round" style="background: #ff69ab"></div>
              <span style="color: #ff69ab">完成静态相似性评估</span>
            </div>
            <div
              class="evaluation-process"
              v-if="scope.row.evaluationStage === '3'"
            >
              <div class="round" style="background: #fe8b42"></div>
              <span style="color: #fe8b42">完成动态相似性评估</span>
            </div>
            <div
              class="evaluation-process"
              v-if="scope.row.evaluationStage === '4'"
            >
              <div class="round" style="background: #ff00ff"></div>
              <span style="color: #ff00ff">完成性能推算</span>
            </div>
            <div
              class="evaluation-process"
              v-if="scope.row.evaluationStage === '5'"
            >
              <div class="round" style="background: #8000ff"></div>
              <span style="color: #8000ff">完成边界推算</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150" />
        <el-table-column label="原始数据" width="80">
          <template #default="scope">
            <el-button
              link
              size="small"
              @click="onDownloadOriginDataDocument(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="处理后数据" width="90">
          <template #default="scope">
            <el-button
              link
              size="small"
              :disabled="!scope.row.dealSampleId"
              @click="onDealAfterData(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column label="评估结果文档" width="100">
          <template #default="scope">
            <el-button link size="small">数据文档链接</el-button>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button
              link
              size="small"
              @click="onUpdateBaseInfo(scope.$index, scope.row)"
              >编辑基础信息</el-button
            >
            <el-button
              link
              size="small"
              @click="onEditParams(scope.$index, scope.row)"
              >编辑参数</el-button
            >
          </template>
        </el-table-column>
      </CommonTable>
    </div>

    <el-dialog
      v-model="addDialogVisible"
      title="基础信息-新增"
      width="440"
      :before-close="handleClose"
    >
      <BaseInfoDialog
        :handleClose="handleClose"
        :addDialogVisible="addDialogVisible"
      />
    </el-dialog>

    <el-dialog
      v-model="editDialogVisible"
      title="基础信息-编辑"
      width="440"
      :before-close="handleClose"
    >
      <BaseInfoDialog
        :handleClose="handleClose"
        :record="record"
        :editDialogVisible="editDialogVisible"
        :onQuery="onQuery"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage, FormInstance, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {
  Plus,
  Delete,
  Download,
  Promotion,
  Search,
} from "@element-plus/icons-vue";
import PageHeader from "@/components/page-header/index.vue";
import CommonTable from "@/components/common-table/index.vue";
import { Page } from "@/components/common-table/type";
import {
  httpSampleData,
  httpPatchDel,
  httpProcess,
  exportSampleToExcel,
} from "@/api/testSampleData";
import BaseInfoDialog from "./components/BaseInfoDialog/index.vue";
import { reverseContentType, downloadFile } from "@/utils/tools";

let $router = useRouter();
const keyword = ref<string>("");
const state = reactive<any>({
  tableData: [],
});
const selectKeys = ref<string[]>([]);
const loading = ref<boolean>(false);
const formRef = ref<FormInstance>();
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const total = ref<number>(0);
const addDialogVisible = ref<boolean>(false);
const editDialogVisible = ref<boolean>(false);
const record = ref<Object>({});

onMounted(() => {
  onQuery({ pageNo: 1 });
});

// 查询数据
const onQuery = (val: any) => {
  const params = {
    sampleName: keyword.value,
    sampleId: "",
    // sampleType: '0', // 0-原始样本，1-处理后样本
    pageSize: page.pageSize,
    pageNo: page.current,
    ...val,
  };
  loading.value = true;
  httpSampleData(params).then((res) => {
    const result = res.data;
    loading.value = false;
    const { rows, totalRows } = result;
    total.value = totalRows;
    state.tableData = rows;
    selectKeys.value = [];
  });
};

// 新增
const onAdd = () => {
  addDialogVisible.value = true;
};

// 修改基本信息
const onUpdateBaseInfo = (index: number, row: any) => {
  record.value = row;
  editDialogVisible.value = true;
};

// 编辑
const onEditParams = (index: number, row: unknown) => {
  $router.push({
    path: "testSampleData/layer",
    query: { layerType: "edit", sampleId: row?.id, interType: row?.interType },
  });
};

// 过滤出keys
const filterKeys = (arr: []) => {
  let keys: string[] = [];
  for (let item of arr) {
    keys.push(item.id);
  }
  return keys;
};

// 选择监听器
const onSelectChange = (val: []) => {
  selectKeys.value = filterKeys(val);
};

// 多个删除
const onDelete = () => {
  if (selectKeys.value && selectKeys.value.length > 0) {
    ElMessageBox.confirm("你确定要删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      const sampleIds = toResverStr(selectKeys.value);
      httpPatchDel({ sampleIds }).then((res: any) => {
        const { code, msg } = res;
        if (code === 200) {
          onQuery({ pageNo: 1 });
          ElMessage({
            message: msg || "删除成功",
            type: "success",
          });
        }
      });
    });
  } else {
    ElMessage({
      message: "请选择一条记录!",
      type: "warning",
    });
  }
};

const toResverStr = (data: string[]) => {
  const str = data.join(",");
  return str;
};

// 导出Excel表格: 只导出用户选中的数据
const onExportExcel = () => {
  if (selectKeys.value && selectKeys.value.length > 0) {
    ElMessageBox.confirm("你确定要导出excel文件吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      const ids = toResverStr(selectKeys.value);
      downloadFile(exportSampleToExcel, ids, "试验样本数据");
      onQuery({ pageNo: 1 });
    });
  } else {
    ElMessage({
      message: "请选择要导出的数据!",
      type: "warning",
    });
  }
};

// 进程
const onProcess = () => {
  if (selectKeys.value && selectKeys.value.length > 0) {
    httpProcess({ ids: selectKeys.value }).then((res: any) => {
      const { code, msg } = res;
      if (code === 200) {
        onQuery({ pageNo: 1 });
        ElMessage({
          message: msg || "删除成功",
          type: "success",
        });
      }
    });
  } else {
    ElMessage({
      message: "请选择一条记录!",
      type: "warning",
    });
  }
};

// 原始数据查看
const onDownloadOriginDataDocument = (index: number, row: unknown) => {
  $router.push({
    path: "testSampleData/layer",
    query: {
      layerType: "look",
      sampleId: row?.id,
      interType: row?.interType,
    },
  });
};

// 处理数据查看
const onDealAfterData = (index: number, row: unknown) => {
  $router.push({
    path: "/testSampleDataManageSystem/testSampleData/comparison",
    query: {
      dealBeforeId: row?.id,
      dealAfterId: row?.dealSampleId,
      interType: row?.interType,
      pageType: "dealLook",
    },
  });
};

// 下载评估结果后文档
const onEvaluateResultDocument = (index: number, row: unknown) => {};

// 弹窗关闭
const handleClose = () => {
  addDialogVisible.value = false;
  editDialogVisible.value = false;
  record.value = {};
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/buttons";
.test-sample-data {
  .search {
    display: flex;
    :deep() {
      .el-input--small .el-input__wrapper {
        margin-right: 10px;
      }
    }
  }
  .layout-container-table {
    .el-button--small {
      background: transparent;
      color: rgba(24, 81, 237, 1);
      font-size: 13px;
    }
  }
  .evaluation-process {
    display: flex;
    cursor: pointer;
    // color: rgb(24, 81, 237);
    .round {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      position: relative;
      top: 7px;
      right: 4px;
    }
  }

  :deep() {
    .el-dialog__body {
      padding: 10px 20px;
    }
  }
}
</style>
